<template>
    <div class="add-material file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog" width="200px">
            <template #content>
                <div class="form">
                    <div class="form-item">
                        <div class="label">材料名称</div>
                        <pui-input placeholder="请输入材料名称" v-model="componentRef.material.name" type="input" clearAble full></pui-input>
                    </div>
                    <div class="form-item">
                        <div class="label">材料颜色</div>
                        <div class="color-box">
                            <pui-color-picker v-model="componentRef.material.color" @changeColor="changeColor"></pui-color-picker>
                            <span class="color-text">{{ componentRef.material.color }}</span>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button type="primary" @click="submitForm">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
import { PhotMaterial } from '@/common/types/phot_types'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '新增材料'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {},
})
const componentRef = reactive({
    dialogVisible: false,
    material: new PhotMaterial()
})
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}

const changeColor = (val :any) => {
    componentRef.material.color = val
}
const submitForm = async () => {
    proxy.$loading.open()
    await deviceManager.addMaterial(componentRef.material)
    closeDialog()
    proxy.$loading.close()
    proxy.$toast({
        value: '添加材料成功',
        type: 'success'
    })
}
defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>